﻿<html>

<head>
    <title>点名器 V2.0.4</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="./resource/js/jquery-3.1.1.js"></script>
    <script src="./resource/js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet" href="./resource/css/bootstrap.min.css">
    <script src="./resource/js/md5.js"></script>
    <script src="./resource/js/base64.js"></script>
    <script src="./list.js"></script>
    <style>
        .namelistdiv {
            display: -webkit-flex;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .name {
            font-size: 24px;
            float: left;
            display: inline;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 5px;
            margin-bottom: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            width: 135px;
            height: 45px;
            text-align: center;
        }
    </style>
</head>

<body>
    <center>
        <img style="margin-top:10px;" width="250px" src="./resource/logo.png"></img>
    </center>
    <ul style="margin-top:10px;margin-right:15%;margin-left:15%;" class="nav nav-tabs">
        <li id="page-random-nav" role="presentation" class="active">
            <a href="javascript:changePage('#page-random')">点名</a>
        </li>
        <li id="page-editname-nav" role="presentation">
            <a href="javascript:changePage('#page-editname')">生成名单</a>
        </li>
        <li id="page-about-nav" role="presentation">
            <a href="javascript:changePage('#page-about')">关于</a>
        </li>
    </ul>

    <!-- 点名页 -->
    <div id="page-random" style="margin-top:20px;">
        <div class="panel panel-default" style="margin-right:20%;margin-left:20%;">
            <div class="panel-body namelistdiv" id="namelist"></div>
        </div>
        <script src="./resource/js/main.js"></script>
        <center>
            <div id="div-start">
                <button class="btn btn-default btn-lg" onclick="javascript:startRandom()" type="button" style="width:50%">
                    <h4 style="display:inline">开始</h4>
                </button>
            </div>
            <div class="progress" id="div-running" style="display:none;width:50%">
                <center>
                    <div id="progressbar" class="progress-bar progress-bar-info progress-bar-striped active" style="width:0%">
                        <span class="sr-only">Running</span>
                    </div>
                </center>
            </div>
        </center>
    </div>

    <!-- 名单修改页 -->
    <div id="page-editname" style="display:none;margin-top:20px;">
        <div class="panel panel-default" style="margin-right:20%;margin-left:20%;">
            <div class="panel-body">
                <span style="margin-left:5%;overflow-y:scroll">请以一行一个名字的格式输入：</span>
                <textarea id="editnamelist" style="border:1px solid silver;width:90%;margin-right:5%;margin-left:5%;height:400px;"></textarea>
                <button style="display:block;margin-left:5%;width:90%" type="button" class="btn btn-default btn-lg" onclick="javascript:spawnListJS()">
                    <h4 style="display:inline">生成</h4>
                </button>
                <button style="display:block;margin-left:5%;width:90%" type="button" class="btn btn-default btn-lg" onclick="javascript:saveListJS()">
                    <h4 style="display:inline">保存</h4>
                </button>
                <p style="margin-left:5%;margin-right:5%">名单修改步骤：<br />1、将名字<code>每行一个</code>输入到文本框中<br />2、点击<code>生成</code>按钮<br />3、以下两种方法均可：
                    <ul style="margin-left:5%;margin-right:5%">
                        <li>复制以上生成的代码，打开软件目录下的<code>list.js</code>，删除原有代码，将新生成的代码复制进去，然后保存</li>
                        <li>点击保存按钮，下载文件，将其保存（或复制）到软件目录下（与<code>点名器.html</code>同目录），并命名为
                            <code>list.js</code>（如已存在该文件则删除/替换原文件）<br />注：如浏览器提示文件可能损害计算机，选择保留文件即可</li>
                    </ul>
                </p>
            </div>
        </div>
    </div>

    <!-- 关于页 -->
    <div id="page-about" style="display:none;margin-top:20px;">
        <div class="panel panel-default" style="margin-right:20%;margin-left:20%;">
            <div class="panel-body">
                <div style="margin-left:5%;margin-right:5%">
                    <h3>关于</h3>
                    <p>版本：2.0.4</p>
                    <p>Github：
                        <a class="text-info" href="https://github.com/Netrvin/RandomName" target="_blank">https://github.com/Netrvin/RandomName</a>
                    </p>
                    <strong>特性</strong>
                    <li>自动生成待点名单，避免在名单点完一遍前重复点到同一人</li>
                    <li>将待点名单用localStorage存储在浏览器中，避免出现运气“过好”的情况（若不存储待点名单，则每次打开浏览器/刷新页面均会重新生成待点名单）</li>
                    <strong>更新日志</strong>
                    <p>
                        <code>V2.0.4</code>：
                        <strong>新增特性</strong>：“将待点名单用localStorage存储在浏览器中”</p>
                    <p>
                        <code>V2.0.3</code>：
                        <strong>修改协议为BSD-2-Clause</strong>
                    </p>
                    <p>
                        <code>V2.0.2</code>：
                        <strong>新增特性</strong>：“自动生成待点名单”</p>
                    <p>
                        <code>V2.0.1</code>：
                        <strong>修复Bug</strong>：“名单列表未居中”</p>
                    <strong>已知问题</strong>
                    <li>名单修改过程较为复杂</li>
                    <li>参数修改过程较为复杂</li>
                    <p>
                        <strong>在此特别感谢以下项目：</strong>
                    </p>
                    <li>
                        <a href="https://jquery.org/" target="_blank" rel="nofollow">jQuery</a>
                    </li>
                    <li>
                        <a href="http://getbootstrap.com/" target="_blank" rel="nofollow">Bootstrap</a>
                    </li>
                    <li>
                        <a href="https://github.com/blueimp/JavaScript-MD5" target="_blank" rel="nofollow">JavaScript-MD5</a>
                    </li>
                    <li>
                        <a href="https://mths.be/base64" target="_blank" rel="nofollow">base64</a>
                    </li>
                </div>
            </div>
        </div>
    </div>
    <hr />
    <center>RandomName V2.0.4. Licensed under BSD-2-Clause</center>
    <br />
    <!-- 点名结果 -->
    <div style="margin-top:10%" class="modal fade" id="Result" tabindex="-1" role="dialog" aria-labelledby="ResultLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="ResultLabel">结果</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-success">
                        <center>
                            <span id="NameResultSpan" style="font-size:38px"></span>
                        </center>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <h4 style="display:inline">关闭</h4>
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
